
<template>
<!-- 播放音乐的固定底部控件 -->
    <div class="music-box">
        <!-- 播放控件 -->
        <div class="box-wrapper">
            <div class="wrapper"
            v-if="playerId" 
            @click="showLayout">
                <ul class="control">
                    <li>
                        <div
                        :class="['img-box',{current:isPlayState}]">
                            <img :src="songpic" alt=""/>
                        </div>
                    </li>
                    <li>
                        <p class="txt-box">
                            <span>{{message}}</span>
                        </p>
                    </li>
                    <li class="con">
                        <div 
                        @click.stop="toggle"
                        class="ctx-box">
                            <canvas ref="canvas"></canvas>
                            <span>{{tip}}</span>
                        </div>
                        <!-- 阻止冒泡 -->
                        <div class="genduo-txt" @click.stop="getList">
                            <span class="iconfont icon-zujian-icon-32 "></span>
                        </div>
                    </li>
                        

                </ul>
            </div>
             <!-- 音乐播放列表 -->
        <div class="musicPlayList" v-if="isMusicPlayList">
        <div class="dt">
            <h1>
            <i class="iconfont icon-xunhuan1"></i>顺序播放({{
                playerLists.length
            }})
            </h1>
            <span class="iconfont icon-shanchu1" @click="clearList"></span>
        </div>
        <dl>
            <dd
            v-for="(item, index) in playerLists"
            :key="index"
            @click="editPlayerId(item.id)"
            >
            <p>
                <i v-if="item.id == playerId" class="iconfont icon-laba"></i
                >{{ item.name }}
            </p>
            <span class="iconfont icon-shanchu" @click.stop="delList(item.id)"></span>
            </dd>
        </dl>
        <div class="button" @click="isMusicPlayList = false">关闭</div>
        </div>
            <!-- 多媒体元素 audio -->
            <div class="wrapper"
            v-if="playerId">               
                <audio
                controls
                autoplay
                :src="`${songurl}`"
                ref="audio"
                @timeupdate="timeupdate"
                @ended="end"
                @play="play"
                @pause="pause"
                @canplay="canplay"></audio>
            </div>
        </div>
        <!-- 满屏界面 歌词组件 -->
        <div>
            <transition :duration="{enter:800,leave:500}"
            enter-active-class="animate__animated animate__fadeInUpBig"
            leave-active-class="animate__animated animate__lightSpeedOutLeft">
                <full-layout
                v-if="isShowLayout"
                @slide-out="hideLayout"
                @music-play="togglePlay"
                :curTime="currentTime"
                :totTime="totalTime"
                :musicItem="optionItem"
                :list-ids="listId"
                >
                
                </full-layout>
            </transition>
        </div>
    </div>
</template>

<script>
//导入接口函数
import {getSongUrl,getSongDetail} from "../../api/player"
import { getPlaylistDetail} from "../../api/rank";
// 导入满屏组件
import fullLayout from "@/components/public/FullLayout.vue";
export default {
    name:'Player',
    components: {
        fullLayout
    },
    //来自App组件的数据 vue不推荐直接在子组件中修改父组件传来的props的值，会报错
    props:['playerId','listId'],
   
    data() {
        return {
            //控制播放的布尔值
            isPlayState:false,
            //歌名
            message:'Hello Music',
            //当前时间
            currentTime:0,
            //总时间
            totalTime:0,
            tip:'暂停',
            //显示或隐藏播放控件信息
            isShowLayout:false,
            //音乐播放地址
            songurl:null,
            //歌曲图片
            songpic:null,
            //传给fullLayout的歌曲信息
            optionItem: null,
            playerLists:[],//播放列表数据
            isMusicPlayList:false,//歌曲列表显示
        }
    },
    methods: {
        // 添加绘制圆的方法
        drawCircle(current,total) {
           if(this.$refs.canvas) {
                // 获取画布元素
            let canvas=this.$refs.canvas;
            let w=window.innerWidth;
            if(w>=375) {
                w=375;
            }
            let size=(w / 375) * 37.5;
            // 设置画布的大小
            canvas.width=size;
            canvas.height=size;
            // 获取绘图上下文对象
            let ctx=canvas.getContext('2d');
            // 清除画布
            ctx.clearRect(0,0,canvas.width,canvas.height);
            // 绘制圆的方法
            let draw=(x,y,r,s,e,color)=> {
                //开启
                ctx.beginPath();
                ctx.strokeStyle=color;
                ctx.lineWidth=2;
                ctx.arc(x,y,r,
                (s*Math.PI) / 180,
                (e*Math.PI) / 180,
                false
                )
                ctx.stroke();
                ctx.closePath();
            }
            // 记录参数
            let x=size/2;
            let y=size/2;
            let r=15;
            // 绘制圆1
            draw(x,y,r,0,360,'white');
            // 绘制圆2
            let demo=current / total;
            draw(x,y,r,0,360*demo,'#e4393c');
           }

        },
        // 添加文本滚动的方法
        loopText() {
            let startStr=this.message.slice(0,1);
            let endStr=this.message.slice(1);
            let str=endStr + startStr;
            this.message=str;
        },
        // 获取音频文件总时长
        canplay() {
            this.totalTime=this.$refs.audio.duration;
        },
        // 监听音频播放的方法(实时执行的)
        timeupdate() {
            if(this.$refs.audio) {
                // 绘制的播放的进度
                this.$nextTick(()=> {
                    this.drawCircle(this.currentTime,this.totalTime);
                })
                // 文本轮播
                this.loopText();
                // 音频当前播放的时间
                this.currentTime=this.$refs.audio.currentTime;
                // this.value=(this.currentTime / this.totalTime) *100;

            }

        },
        // 监听音频播放结束
        end(event) {
            // audio
            if(event.target) {
                event.target.play();
            }
        },
        // 播放
        play() {
            if(this.$refs.audio) {
                this.isPlayState=false;
                this.$refs.audio.play();
            }
        },
        // 暂停
        pause() {
            if(this.$refs.audio) {
                this.isPlayState=true;
                this.$refs.audio.pause();
            }
        },
        // 切换播放暂停
        toggle() {
            if(this.isPlayState) {
                this.play();
                this.tip='暂停';
            }else {
                this.pause();
                this.tip='播放';
            }
            //调用父组件的播放暂停的方法
            this.$emit('item-out',this.isPlayState);
        },
        // 显示歌曲信息界面
        showLayout() {
            this.isShowLayout=true;
        },
        // 隐藏歌曲信息界面
        hideLayout(isShow) {
            this.isShowLayout=isShow;
        },
        // 子组件控制播放或暂停(子组件FullLayout)
        togglePlay(isPlay) {

            if(isPlay) {
                this.play();
            }else {
                this.pause();
            }
        },
        //获取播放歌曲的url
        getSongUrlFun() {
            //this.playerId来自App组件
            getSongUrl({id:this.playerId}).then((data)=>{
                // 
                if(data.code==200) {
                    //audio播放地址
                    this.songurl=data.data[0].url;
                    //歌曲id 歌曲图片 歌曲名 
                    
                }
                // 
            })
        },
        //获取歌曲详细信息
        getSongDetailFun() {
            getSongDetail({ids:this.playerId}).then((data)=>{
                // 
                if(data.code==200) {
                    //歌手图片
                    this.songpic=data.songs[0].al.picUrl;
                    //歌手
                    let singer=data.songs[0].ar;
                    let singerStr='';
                    for(let i=0;i<singer.length;i++) {
                        singerStr+=`:${singer[i].name}-`;
                    }
                    // 歌曲名
                    this.message=data.songs[0].al.name+singerStr;

                    // Object.assgin(target,source1,source2) 对象合并到target对象中
                    //传给fullLayout组件的歌曲信息
                    this.optionItem=data.songs[0];
                    let index=this.playerLists.findIndex((item)=>item.id==data.songs[0].id);
                    if(index=='-1') {
                        //没有这条数据,数据添加到数组里
                        this.playerLists.push(this.this.optionItem);
                    }
                }
            }).catch(err=>{
                
            })
        },
        //点击更多图标
        getList() {
            this.isMusicPlayList=true;
            if(this.listId!=null) {
                //根据歌单id查找10条音乐歌曲数据
                getPlaylistDetail({id:this.listId}).then(data=>{
                    // 
                    this.playerLists = data.playlist.tracks; //获取歌单数据
                }).catch(err=>{
                    
                })
            }           
        },
        //点击歌曲列表里的歌曲
        editPlayerId(id) {
            // 
            //父子组件 , 传给App组件
            this.$emit("get-player-id", id);
        },
        //删除列表歌曲数据
        delList(id) {
            let index = this.playerLists.findIndex(item=>item.id==id);          
            this.playerLists.splice(index,1);
        },
        //清空列表播放中的歌曲
        clearList() {
            this.playerLists=[];
        }
    },
    //侦听器 
    watch: {
        //侦听id值
        playerId(){
            //判断id 不为空时 ,才调用请求数据接口 
            if(this.playerId != null){
                // false表示图片旋转
                this.isPlayState=true;
                this.getSongUrlFun();
                this.getSongDetailFun();
            }
        },
        listId() {
            if(this.listId!=null) {
                // 
                //根据歌单id查找10条音乐歌曲数据
                getPlaylistDetail({id:this.listId}).then(data=>{
                    // 
                    this.playerLists = data.playlist.tracks; //获取歌单数据
                })
            }
        }


    },
    //路由跳转之前
    beforeRouterEnter(to,from,next) {
        getSongUrl({id:this.playerId}).then(data=>{
            next(vm=>vm.getSongDetailFun());
        })
    },
    mounted() {
        // 更新DOM之后调用回调函数
        this.$nextTick(()=>{
            this.drawCircle(30,100);
            
        })
    }
}
</script>

<style lang="less" scoped>
.music-box {
    width:100%;
    height:50px;
    background-color: rgba(0,0,0,0.5);
    position:fixed;
    bottom:50px;
    left:0;
    z-index:1000;
}
.box-wrapper {
    width:100%;
    height:50px;
    position:relative;
    .wrapper {
        width:100%;
        height:50px;
        position:absolute;
        top:0;
        left:0;
    }
    >div {
        &:nth-of-type(1) {
            z-index:1000;
        }
    }
}
.control {
    height:50px;
    display:flex;
    font-size:20px;
    padding:0 10px;
    align-items:center;
    justify-content: space-between;
}
.img-box {
    width:45px;
    height:45px;
    overflow: hidden;
    border-radius:50%;
    background-color: #ccc;
    border:3px solid #fff;
    // 动画设置
    animation-name:loop ;
    animation-duration: 2s;
    animation-iteration-count:infinite ;
    animation-timing-function: linear;
    img {
        width:45px;
        height:45px;
        vertical-align: middle;
    }

}
.img-box.current {
    animation-play-state: paused;
}
.con{
    display: flex;
    align-items: center;
}
.txt-box {
    span {
        font-size:14px;
        color:#fff;
    }
}
.genduo-txt{
    margin-left: 5px;
    span{
        font-size:24px;
        color:#fff;
    }
}
.ctx-box {
    width:48px;
    height:48px;
    position: relative;
    canvas {
        width:48px;
        height: 48px;
    }
    span {
        position: absolute;
        top:0;
        left:0;
        display: block;
        width:48px;
        height:48px;
        text-align:center;
        line-height:48px;
        font-size:12px;
    }
}
//歌曲列表
.musicPlayList {
  background-color: #fff;
  position: fixed;
  left: 0px;
  bottom: 0px;
  z-index: 1000;
  width: 100%;
  height: 310px;
  border-radius: 5px 5px 0 0;

  .dt {
    margin-top: 12px;
    height: 28px;
    line-height: 28px;
    position: relative;
    h1 {
      font-size: 16px;
      text-indent: 18px;
      text-align: left;

      i {
        font-size: 18px;
        margin-right: 8px;
      }
    }
    span.iconfont {
      display: inline-block;
      position: absolute;
      top: 2px;
      right: 25px;
      font-size: 18px;
    }
  }
  dl {
    height: 220px;
    overflow-y: scroll;
    dd {
      text-indent: 18px;
      margin: 0;
      font-size: 14px;
      height: 37px;
      line-height: 37px;
      position: relative;
      text-align: left;
      p {
        i {
          margin-right: 4px;
          color: red;
        }
        width: 80%;
        height: 37px;
        overflow: hidden;
      }
      span {
        display: inline-block;
        position: absolute;
        top: 2px;
        right: 25px;
        font-size: 18px;
        color: red;
      }
    }
  }
  .button {
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
  }
}

// 定义动画
@keyframes loop {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
// 隐藏元素 透明 宽度 高度
audio {
    opacity:0;
    width:0;
    height:0;
}

</style>


